<html>
<head>
<script type="text/javascript" src="/scripts/dom.js"></script>
<script type="text/javascript" src="/scripts/ajax.js"></script>
<script type="text/javascript">

function loadPlayer() {
	var id = document.getElementById("id").value;

	ajaxRequest("getplayer.jsp?id="+ id, function(json) {
		listPlayer(json);
	});
}

function loadPlayers() {
	var selectedPlayer = document.getElementById("selectedPlayer");

	ajaxRequest("listplayers.jsp", function(json) {
		for (var i = 0; i < json.length; ++i) {
			var player = json[i];
			selectedPlayer.add(buildOption(player.name, player.id), null);
//			selectedPlayer.add(buildPlayerOption(player), null);
		}
	});
}
//function buildPlayerOption(player) {
//	var option = document.createElement("option");
//	option.text = "'"+ player.name +"'";
//	option.value = player.id;
//	return option;
//}

function loadSelectedPlayer() {
	var selectedPlayer = document.getElementById("selectedPlayer");
	var id = selectedPlayer.value;

	ajaxRequest("getplayer.jsp?id="+ id, function(json) {
		listPlayer(json);
	});
}

function listPlayer(player) {
	removeAllChildrenOfId("player");
	removeAllChildrenOfId("games");

	appendChildToId("player", buildPlayerRow(player));
	var games = player.games;
	for (var i = 0; i < games.length; ++i) {
		var game = games[i];
		ajaxRequest("getgame.jsp?id="+ game, function(json) {
			appendChildToId("games", buildGameRow(json));
		});
	}
}
function buildPlayerRow(player) {
	var playerRow = document.createElement("tr");
	playerRow.appendChild(buildTableCell(buildTextNode(player.id)));
	playerRow.appendChild(buildTableCell(buildTextNode(player.name)));
	playerRow.appendChild(buildTableCell(buildTextNode(player.mail)));
	playerRow.appendChild(buildTableCell(buildTextNode(player.registered)));
	playerRow.appendChild(buildTableCell(buildTextNode(player.rank)));
	playerRow.appendChild(buildTableCell(buildTextList(player.games)));
	return playerRow;
}
function buildGameRow(game) {
	var gameRow = document.createElement("tr");
	gameRow.appendChild(buildTableCell(buildTextNode(game.id)));
	gameRow.appendChild(buildTableCell(buildTextNode(game.name)));
	gameRow.appendChild(buildTableCell(buildTextNode(game.state.name)));
	gameRow.appendChild(buildTableCell(buildTextList(game.players)));
	return gameRow;
}
function buildPlayersList(players) {
	var list = ".";
	for (var i = 0; i < players.length; ++i) {
		var player = players[i];
		list += player;
		if (i < players.length -1) list += ", ";
	}
	return list;
}

window.onload = function() { loadPlayers(); loadPlayer(); }
</script>
</head>
<body>

<h1>Select Player</h1>
<select id="selectedPlayer"></select>
<button onclick="loadSelectedPlayer()">Load</button>

<h1>Player Info</h1>
<table border>
<tr>
<th>Id</th>
<th>Name</th>
<th>Mail</th>
<th>Registered</th>
<th>Rank</th>
<th>Games</th>
</tr>
<tbody id="player">
</tbody>
<tfoot>
<tr>
<td><input id="id" /></td>
<td><input id="name" /></td>
<td><input id="mail" /></td>
<td><input id="rank" /></td>
</tr>
</tfoot>
</table>

<h1>Games</h1>
<table border>
<tr>
<th>Id</th>
<th>Name</th>
<th>State</th>
<th>Players</th>
</tr>
<tbody id="games">
</tbody>
</table>

<button onclick="loadPlayer()"/>Load Player</button>
<br>
<a href="register.jsp">Register</a>
<a href="getplayer.jsp">Get Player</a>
<a href="listplayers.jsp">List Players</a>
<a href="clearplayers.jsp">Clear Players</a>
</body>
</html>
